<!--用来细化到展示每一份菜-->
<script setup>
import Menu from "@/components/Menu.vue";
import Head from "@/components/Head.vue";
import RemarkSingleBar from "@/components/RemarkSingleBar.vue";
import RemarkPublishComponent from "@/components/RemarkPublishComponent.vue"
import {  computed } from 'vue'
import {getDetailDishs, queryAllDishes} from '@/web-api/DishAndRes_User/dishes-user'
import { useRouter } from "vue-router";
import router from "@/router/index.js";
import {baseStaticRecourseAPI, NOW_ENVIRONMENT} from "../../baseAPIConfig.js";
import {queryAllComment} from "@/web-api/DishAndRes_User/dish-comment.js";
import {getLocalStorage, KEY_USER_ID} from "@/utils/localStorge.js";

const route = useRouter();
const size = ref('')
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
});
let components = {Menu, Head, RemarkSingleBar, RemarkPublishComponent};
let dishInfo = ref({});
const selectDetailInformation=()=> {
  console.log('id',router.currentRoute.value.params.dishId);
  getDetailDishs(router.currentRoute.value.params.dishId).then(res => {
    console.log("res")
    console.log(res.data)
    dishInfo.value = res.data;
    console.log("dosh")
    console.log(dishInfo);
  })
};

const handlePageChange = (pageNum, pageSize)=>{
  queryParams.pageNum = pageNum;
  queryParams.pageSize = pageSize;
  handleQuery();
}
let queryParams = reactive({
  // 同步分页器
  pageNum: 1,
  pageSize: 8,
})

// 当前页数据
let tableProp = ref([]);
// 当前页数据总数
let total = ref(0);
// 表格加载遮罩层
let tableLoading = ref(false);
// 选中的菜品id
let ids = ref([])
const handleQuery = ()=>{
  getList(queryParams);
}
const getList = (queryParams) => {
  console.log("queryParams",queryParams);

  // 设置表格加载状态为 true
  tableLoading.value = true;

  let params = {pageNum: queryParams.pageNum, pageSize: 8,dishId:router.currentRoute.value.params.dishId};
  // 构建请求参数对象
  console.log(params);

  queryAllComment(params).then(res => {
    tableProp.value = res.rows
    console.log('res',res);
    // 更新总条目数
    total.value = res.total;
    console.log(total.value)
    // 设置表格加载状态为 false，表示加载完成
    tableLoading.value = false;
    console.log("data",tableProp.value)
  });
};


let currentUrl = ref();
onBeforeMount(() => {
  currentUrl.value = route.path;
  selectDetailInformation();
  getList(queryParams);
})

</script>
<style scoped>

.page{
  background-color: #fdfdfe; /* 设置背景颜色，仅作为示例 */
  margin-left: 300px;
  margin-right: 300px;
}
.page .image{
  width: 200px; /* 设置宽度 */
  height: 150px; /* 设置高度 */
  margin-left: 20px;
  margin-top: 10px;
  object-fit: contain;
}
.deprecated-original-price{
  text-decoration: line-through;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<template>
  <div class="head">
    <Head></Head>
  </div>
  <div class="menu">
    <Menu></Menu>
  </div>
  <div class="page">
    <img :src="baseStaticRecourseAPI[NOW_ENVIRONMENT]+dishInfo.picture" alt="暂无图片" class="image"/>
    <el-descriptions
        :column="4"
        :size="size"
        direction="vertical"
        :style="blockMargin"
        class="container"
    >
      <el-descriptions-item label="餐名">{{dishInfo.dishName}}</el-descriptions-item><!--菜名-->
      <el-descriptions-item label="售价">{{ dishInfo.salesPrice}}</el-descriptions-item>
      <el-descriptions-item label="原价"><span  class="deprecated-original-price">{{dishInfo.originalPrice}}</span></el-descriptions-item>
      <el-descriptions-item label="菜系">{{dishInfo.cuisine}}</el-descriptions-item>
    </el-descriptions>
  </div>

  <div class="page">
    <RemarkPublishComponent :dishId = "router.currentRoute.value.params.dishId" :userId="getLocalStorage(KEY_USER_ID)"></RemarkPublishComponent><br>
    <div v-for="comment in tableProp" :key="comment.commentId" class="bar"><RemarkSingleBar :Comment="comment"></RemarkSingleBar></div></div>
  <el-pagination class = pagination
                 layout="prev, pager, next" :total="50"
                 @change="handlePageChange">
  </el-pagination>
</template>